import { Button, FloatButton, Pagination } from "antd"
import { TypeList } from "../../compnents/typeList"
import style from "./index.module.css"
import { IssueCard } from "../../compnents/IssueCard"
import { reqGetIssueByPage } from "../../api/issue"
import { useEffect, useState } from "react"
import { useSelector } from "react-redux"
import { ROOT_STATE } from "../../store"
import { IssuePageData } from "../../Types/Api/issue"
import { Recommend } from "../../compnents/Recommend"
import { Score } from "../../compnents/Score"
import { PageTitle } from "../../compnents/Title"

type PageData = {
  currentPage: number
  total: number
  pageSize: number
}

export const Issue = () => {
  const [issueList, setIssueList] = useState<JSX.Element[]>([])
  // 装翻页相关的数据

  // 拿到Issue的type
  const issueType = useSelector(
    (state: ROOT_STATE) => state.typeReducer.issueType
  )
  const [pageData, setPageData] = useState<PageData>({
    currentPage: 1,
    total: 1,
    pageSize: 15,
  })
  const getIssueData = async () => {
    const issueData: IssuePageData = {
      current: pageData.currentPage,
      pageSize: pageData.pageSize,
      issueStatus: true,
    }
    if (issueType !== "all") {
      issueData.typeId = issueType
      issueData.current = 1
    }
    const {
      data: { data, count, currentPage },
    } = await reqGetIssueByPage(issueData)
    // {count, totalPage, data}
    const arr = data.map((item) => (
      <IssueCard key={item._id} issueInfo={item}></IssueCard>
    ))
    setIssueList(arr)
    setPageData({
      ...pageData,
      total: count,
      currentPage: currentPage,
    })
  }
  useEffect(() => {
    getIssueData()
  }, [pageData.currentPage, issueType])
  return (
    <>
      <div className={style.wrapper}>
        {/* 上面title */}
        <PageTitle title="问题列表">
          <TypeList></TypeList>
        </PageTitle>
        {/* 下面内容 */}
        <div className={style.content}>
          {/* 左侧区域 */}
          <div className={style.leftContent}>
            {/* 列表 */}
            {issueList}
            {/* 翻页组件 */}
            {issueList.length > 0 ? (
              <Pagination
                align="center"
                showQuickJumper
                defaultCurrent={pageData.currentPage}
                pageSize={pageData.pageSize}
                total={pageData.total}
                onChange={(e) => {
                  setPageData({
                    ...pageData,
                    currentPage: e,
                  })
                }}
              />
            ) : (
              <div className={style.noIssue}>有问题，就来找我！！！</div>
            )}
          </div>
          {/* 右侧区域 */}
          <div className={style.rightContent}>
            {/* 我要发问 */}
            <Button type="primary" block>
              我要发问
            </Button>
            {/* 推荐内容 */}
            <Recommend></Recommend>
            {/* 积分排行榜 */}
            <Score></Score>
          </div>
        </div>
      </div>
      <FloatButton.BackTop visibilityHeight={500} />
    </>
  )
}
